<template>
  <BasicDrawer
      v-bind="$attrs"
      @register="registerDrawer"
      showFooter
      title="用户还款"
      width="580px"
      @ok="onSave"
      okText="还款"
      :maskClosable="false"
  >
    <div class="card">
      <BasicForm @register="registerForm1" class="form">
      </BasicForm>
      <a-row>
        <a-col :span="15" :offset="3">
          <div style="color: #999">您的欠款金额: {{memberInfo.debtAmount}}</div>
        </a-col>
      </a-row>
    </div>
  </BasicDrawer>
</template>
<script setup>
import {BasicForm, useForm} from '@/components/Form/index';
import {BasicDrawer, useDrawerInner} from '@/components/Drawer';
import {POST} from '@/api/http.js';
import {useMessage} from '@/hooks/web/useMessage';
const emit = defineEmits(['complete']);
const props = defineProps({
  memberInfo: Array
})
const { createMessage } = useMessage();
const [registerForm1, {validateFields}] = useForm({
  schemas: [
    {
      label: '还款金额',
      field: 'repaymentSum',
      componentProps: {
        placeholder: '输入还款金额',
        min: 0,
        max: 9999999,
        precision: 2,
        addonAfter: '元',
      },
      colProps: {
        span: 18,
      },
      required: true,
      component: 'InputNumber',

      rules: [
        { required: true },
      ],
    },
  ],
  showActionButtonGroup: false
});
const [registerDrawer, { closeDrawer}] = useDrawerInner(
);
const onSave = async () => {
  console.log(props.memberInfo)
  const values = await validateFields();
  await POST('/membership/memberRepayment', {repaymentAmount: values.repaymentSum, storeCode: props.memberInfo.storeCode, memberCode:props.memberInfo.memberCode },)
  closeDrawer()
  createMessage.success('还款成功')
  emit('complete');
};
// export default defineComponent({
//   components: {BasicDrawer, BasicForm},
//   emits: ['complete'],
// });
</script>

<style lang="less" scoped>
.card {
  margin: 8px;
  padding: 0 12px;

  .form {
    padding: 24px 12px 0 0;
  }
  .add {
    margin: 12px 64px 12px 0;
    background: #f5f7fa;
    border-radius: 6px;
    padding: 12px 18px;
  }
}
</style>
